<template>
  <div>
    <el-row>
      <el-col :span="15">
        <!--  -->
        <el-form
          :model="formData"
          ref="elForm"
          :rules="rules"
          class="form-body medias-image"
          label-suffix="："
          label-width="160px"
        >
          <!-- <el-form-item label="所属广告公司：" prop="compnayName">
            <el-input
              v-model=" formData.compnayName"
              autocomplete="off"
              placeholder="请输入广告公司名称"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="物料名称" prop="name">
            <el-input
              class="in_pictureName"
              v-model="formData.name"
              autocomplete="off"
              placeholder="请输入物料名称"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片文件" prop="image">
            <el-upload
              class="upload-demo"            
              action="index.php?module=API&method=AdsPlace.transfile&format=json"
              :on-success="handleSuccess"
              v-bind:on-preview="handlePreview"
               v-bind:on-remove="handleRemove"
              :file-list="formData.image"
              :show-file-list="true"
              :on-exceed="handelLimit"
              :limit="1"
              accept=".jpg,image/jpeg,.png,image/png,.gif"
              list-type="picture"             
            >
              <el-button type="primary" icon="el-icon-upload" size="mini"
                >上传图片</el-button
              >
              <label class="in_pictureSupport">支持jpg、gif、png格式</label>
              <!-- <p class="in_pictureURL">使用网络图片URL</p> -->
            </el-upload>
          </el-form-item>
          <el-form-item label="图片尺寸" prop="width">
            <div>
              <div>
                <span>宽度：</span>
                <el-input
                  v-model="formData.width"
                  autocomplete="off"                  
                  :style="{ width: '20%' }"
                ></el-input>
                <span class="in_picturePx1"> px</span>
                <span class="in_picture">高度：</span>
                <el-input
                  v-model="formData.height"
                  autocomplete="off"                 
                  :style="{ width: '20%' }"
                ></el-input>
                <span class="in_picturePx2"> px</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="图片描述" prop="alt">
            <el-input
              v-model="formData.alt"
              autocomplete="off"
              placeholder=""
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="点击链接" prop="linkurl">
            <el-input
              v-model="formData.linkurl"
              autocomplete="off"
              placeholder=""
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <!--  -->
          <el-form-item label="目标窗口" prop="target">
            <el-radio-group v-model="formData.target" size="medium">
              <el-radio
                v-for="(item, index) in targetOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <!--  -->
          <el-form-item label="展现监控链接" prop="trackurl">
            <el-input
              v-model="formData.trackurl"
              placeholder="请输入展现监控链接"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <!--  -->
          <!--  -->
          <el-form-item size="large" class="form-submit-panel">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">关闭</el-button>
          </el-form-item>
          <!--  -->
        </el-form>
        <!--  -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['mediasRow'],
  data() {
    return {
      formData: {
        id:0,
        // companyName: "",
        type: "image",
        name: "",
        image: [],
        width: "",
        height: "",
        alt: "",
        linkurl: "",
        target: 1,
        trackurl: "",
      },
      upimages: [],
      loading: false,
      targetOptions: [
        {
          label: "新窗口",
          value: 1,
        },
        {
          label: "原窗口",
          value: 2,
        },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "物料名称不能为空",
            trigger: "change",
          },
        ],
        image:[
           { 
            required: true,
            message: "请上传图片",
            trigger: "change",
           }
        ],
        width:[
           { 
            required: true,
            message: "请填写高宽值",
            trigger: "change",
           }
        ],
        height:[
           { 
            required: true,
            message: "请填写高宽值",
            trigger: "change",
           }
        ],
        target: [
          {
            required: true,
            message: "目标窗口不能为空",
            trigger: "change",
          },
        ],
        trackurl: [],
      },
    };
  },
  created:function() {
     if(!this.row  || !this.row.hasOwnProperty("id")){ return;}

         // 修改是不是被类型的数据不渲染
      if(this.row.type != 'image') { return; }
      //处理 content
       if(this.row['content']){      
           var content =  this.row['content'] ;
           this.row['image'] = content['image'];   
       }
      //  
       for(var key in this.formData){
         if( this.row[key]){
              this.formData[key] = this.row[key];
         }
       }
      
      
  },
  computed:{
     row: function(){
       
       return this.mediasRow
     }
  },
  methods: {
    handleSuccess(response, file, fileList) { 
        if(response.result== 'success'){            
            this.formData.image.push( {name: response.originalName, url: response.data} );
        }
        
      
    },
    handleRemove(file, fileList) {
          // console.log(fileList);
          this.formData.image = fileList;
          
    },
    handlePreview(file) {
      
    },
  handelLimit(file, fileList){
    this.$message({message: "只能上传一张图片", type: "error" })
  },
    submitForm() {
           // 表单处于loading状态 
     
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        this.loading = true;
        // console.log(this.formData)
        //  提交数据到接口，更新和新建通过 formData.id > 0 来区别
         PlaceAPI.createMedias(this.formData).then((data)=>{
            this.loading = false;
            this.$message({ message: data.msg, type: "success" });
            // 触发关闭Drawer 侧滑层 关闭
            this.formData.id = data.value;
            // 添加成功返回 data.vaule = 物料id；
            this.$emit("onclosedrawer",{ from: 'submit',row: this.formData})
         })

      });

    },
    resetForm() {
       this.$emit("onclosedrawer",{ from: ''})
    },
  },
};
</script>
